<template>
    <div style="height: 100%;background:url(../assets/login2.png)">
      <div class="loginContainer">
      <!-- <div class="login-img"> -->
        <!-- <img src="../assets/143217104131987003.png"> -->
      <!-- </div> -->
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <!-- <h2 class="title">智慧消防信息平台</h2> -->
        <h2 class="title companymame">{{platName}}</h2>
        <!-- <h2 class="title companymame">东源县智慧环卫平台</h2> -->
        <h2 class="title">用户登录</h2>
        <!-- <router-link to="/account/register" class="account-right">注册</router-link> -->
        <el-form-item prop="account">
          <el-input class="login-input" type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"> 
            <i slot="prefix" class="login-icon account-icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input class="login-input" type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码">
            <i slot="prefix" class="login-icon password-icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input class="login-input" style="width:230px" v-model="ruleForm2.code" auto-complete="off" placeholder="验证码">
            <i slot="prefix" class="login-icon code-icon"></i>
          </el-input> <img :src="codeImg" @click="changeCodeImg()" style="vertical-align:middle;cursor: pointer;">
        </el-form-item>
        <el-form-item v-if="adminbool==1">
          <el-input v-model="ruleForm2.admincode"  style="width:230px" auto-complete="off" placeholder="手机验证码"></el-input>
          
        <button class="account-pb-bt" @click="codesb" type="button">{{codehtml}}</button>
        </el-form-item>
        <div class="clearfix">
          <el-checkbox v-model="checked" class="remember ">记住密码</el-checkbox>
          <router-link to="/account/ft_password" class="flont-r">忘记密码？</router-link>
        </div>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" @keyup.enter.native="handleSubmit2()"
            :loading="logining">登录</el-button>
            
          <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
        <!-- {{codeImg}} -->
      </el-form>
      <div class="footer">
        <div class="" style="text-align: center;color: #fff">目前支持谷歌、火狐等主流浏览器(360请在极速模式下使用)</div>
        <div style="text-align: center;"><a href="http://www.beian.miit.gov.cn" style="color: #fff;">{{platIcp}}</a></div>
      </div>
    </div>
    </div>
  </template>
  
  <script>
    import {
      requestLogin,
      logout,
      query,
      userinfo,
      menu_tree,
      get_random_code,
      check_random_code,
      login_message_query,
      send_login_pass_code
    } from "../api/api";
  
    import md5 from 'js-md5';
    //import NProgress from 'nprogress'
    export default {
      data() {
        return {
          phone:'',
          codes: 300,
          platIcp:'',//备案
          platName:'',//平台名称
          codehtml: "获取验证码",
          adminbool: 0,
          codeImg: '',
          logining: false,
          ruleForm2: {
            account: "",
            checkPass: "",
            code: '',
            admincode: ''
          },
          rules2: {
            account: [{
                required: true,
                message: "请输入账号",
                trigger: "blur"
              }
              //{ validator: validaePass }
            ],
            checkPass: [{
                required: true,
                message: "请输入密码",
                trigger: "blur"
              }
              //{ validator: validaePass2 }
            ],
            code: [{
                required: true,
                message: "请输入验证码",
                trigger: "blur"
              }
              //{ validator: validaePass2 }
            ]
          },
          checked: true
        };
      },
      created: function () {
        // this.codeImg=this.urlapi+"/api/auth/get_random_code";
        // this.codeImg = " http://192.168.0.110:9100/api/auth/get_random_code";
  
        var _this = this;
        document.onkeydown = function (e) {
          let key = window.event.keyCode;
          if (key == 13) {
            _this.handleSubmit2();
          }
        };
      },
      methods: {
        codesb() {
          var params = {
            phone: this.phone
          };
          if (this.codes < 300) {
            console.log(this.codes)
            return false;
          }
  
  
          send_login_pass_code(params).then(data => {
            //NProgress.done();
            let {
              code,
              user,
              message
            } = data;
            if (code !== 0) {
              this.$message({
                message: message,
                type: "error"
              });
            } else {
              
              this.codehtml = this.codes-- + "s";
              let t = setInterval(() => {
                this.codes--;
                this.codehtml = this.codes + "s";
                if (this.codes == 0) {
                  clearInterval(t);
                  this.codes = 300;
                  this.codehtml = '获取验证码';
                }
              }, 1000);
              this.$message({
                message: '验证码发送成功，请注意查收',
                type: "success"
              });
            }
          });
        },
        changeCodeImg: function () {
  
          
          var num = Math.ceil(Math.random() * 1000); //生成一个随机数（防止缓存）
          this.codeImg = this.urlapi + "/api/auth/get_random_code?" + num;
          console.log(this.codeImg,666)
          // this.codeImg = " http://192.168.0.110:9100/api/auth/get_random_code?" + num;
        },
        handleReset2() {
          this.$refs.ruleForm2.resetFields();
        },
        userinfo() {
  
        },
        handleSubmit2(ev) {
          console.log(md5(this.ruleForm2.checkPass))
          if (this.checked) {
            localStorage.setItem('account', this.ruleForm2.account);
            localStorage.setItem('checkPass', this.ruleForm2.checkPass);
            localStorage.setItem('loginchecked', this.checked);
          } else {
            localStorage.clear();
          }
          var _this = this;
          this.$refs.ruleForm2.validate(valid => {
            if (valid) {
              // let para = {
              //   code: this.ruleForm2.code
              // }
              // check_random_code(para).then(e => {
              //   console.log(e)
              //   this.logining = false;
              //   //NProgress.done();
              //   let {
              //     code,
              //     data,
              //     message
              //   } = e;
              //   console.log(code, data, message);
              //   if (code !== 0) {
              //     this.$message({
              //       message: message,
              //       type: "error"
              //     });
              //     // this.changeCodeImg();
              //   } else {
                  var loginParams = {
                    username: this.ruleForm2.account,
                    password: this.ruleForm2.checkPass,
                    verifyCode: this.ruleForm2.admincode,
                    code: this.ruleForm2.code
                  };
                  requestLogin(loginParams).then(e => {
                    this.logining = false;
                    //NProgress.done();
                    let {
                      code,
                      data,
                      message
                    } = e;
                    console.log(code, data, message);
                    if (code == 1009||code==1018) {
  
                      // this.adminbool = 1;
                      this.$message({
                        message: message,
                        type: "warning"
                      });
  
                      this.changeCodeImg();
                      return false;
                    }
                    if (code == 1019) {
                      
                    this.phone=data;
                      this.adminbool = 1;
                      this.$message({
                        message: '请输入手机验证码',
                        type: "warning"
                      });
  
                      // this.changeCodeImg();
                      // this.ruleForm2.code = '';
                      return false;
                    }
                    if (code !== 0) {
                      this.$message({
                        message: message,
                        type: "error"
                      });
  
                    } else {
                      let params = {
                        token: data.token
                      };
                      localStorage.setItem("key", JSON.stringify(data.token));
                      this.menubt = ' ';
                      this.menubt = JSON.stringify(data.paths);
                      localStorage.setItem('menubt', JSON.stringify(data.paths));
                      this.setCookie('key', JSON.stringify(data.token));
                      this.$router.push({
                        path: "/loading"
                      });
                    }
                  });
  
  
  
              //   }
              // });
              // return false
  
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        }
      },
      mounted() {
        var user = JSON.parse(localStorage.getItem("key"));
        let _this = this;
        sessionStorage.clear();
        this.delCookie('key');
        // document.write("js获取上(前)一页url"+document.referrer);
        console.log(document.referrer)
        login_message_query().then((res) => {
         console.log(res)
         this.platIcp = res.data[2].remark;
         this.platName = res.data[0].remark;
       })
        if (user) {
          userinfo(user).then(e => {
  
            let {
              code,
              data,
              message
            } = e;
            console.log(code, data, message);
            if (code !== 0) {
              localStorage.removeItem('key');
              localStorage.removeItem('menu');
              localStorage.removeItem('menubt');
              console.log(this.menubt)
              this.menubt = '';
              sessionStorage.clear();
              console.log(user);
            } else if (code == 0) {
              console.log(12);
  
              // sessionStorage.setItem("user", JSON.stringify(data));
              // return false;
              this.$router.push({
                        path: "/home_page"
                      });
            }
          });
  
        } else {}
        this.changeCodeImg();
        // console.log(this.urlapi)
        this.ruleForm2.account = localStorage.getItem('account');
        this.ruleForm2.checkPass = localStorage.getItem('checkPass');
        // this.checked=localStorage.getItem('loginchecked');
        console.log(this.checked)
  
      }
    };
  </script>
  
  <style lang="scss" scoped>
    .login-container {
      /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      background-clip: padding-box;
      margin: 0 auto 90px;
      width: 350px;
      padding: 35px 35px 15px 35px;
      background: #fff;
      // border: 1px solid #eaeaea;
      // box-shadow: 0 0 25px #cac6c6;
  
      .title {
        margin: 0px auto 30px auto;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        // color: #505458;
        color: #00BFF4;
      }
      .companymame{
        position: absolute;
        width: 100%;
        top: -20%;
        left: 0;
        font-size: 30px;
        letter-spacing: 5px;
        background-image:-webkit-linear-gradient(left,#009FF1,#00E8CF); 
        -webkit-background-clip:text; 
        -webkit-text-fill-color:transparent; 
      }
      .flont-r{
       color: #fff; 
      }
      .remember {
        margin: 0px 0px 35px 0px;
        color: #fff;
      }
    }
  
    .login-img {
      position: relative;
      z-index: 1000;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      margin-top: 105px;
      margin-left: 13%;
      margin-right: 72px;
      width: 550px;
      height: 546px;
      background: url(../assets/login2.png) no-repeat 0 0;
      background-size: 100% 100%;
    }
    .login-img  img{
  
      width: 100%;
    }
    .login-container{
      position: absolute;
      // top: 14%;
      top: 50%;
      right: 12%;
      transform: translateY(-50%);
      z-index: 1000;
      background: url(../assets/img/kuang.png) no-repeat 0 0;
      background-size: 100% 100%;
      /* width: 490px; */
    }
    .loginContainer{
      min-width: 1000px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      font-size: 14px;
      color: #303133;
      width: 100%;
      min-height: 100%;
      // background: url(../assets/1564207747.png) no-repeat 0 0;
      background: url(../assets/bg@2x.jpg) no-repeat 0 0;
      // background-size: 1920px 1080px;
      background-size: 100% 100%;
    }
    .footer{
      position: absolute;
      bottom: 20px;
      width: 100%;
    }
    .login-icon{
      // background: red;
      display: inline-block;
      width: 15px;
      height: 40%;
      vertical-align: middle;
      margin-left: 4px;
    }
    .account-icon{
      background: url("../assets/img/zhanghu.png");
      background-size: cover;
    }
    .password-icon{
      background: url("../assets/img/password.png");
      background-size: cover;
    }
    .code-icon{
      background: url("../assets/img/yanzhengma.png");
      background-size: cover;
    }
  </style>